<template>
  <div>
    <Top></Top>
    <el-tabs :tab-position="tabPosition">
      <el-tab-pane label="常用分类">
        <img class="bigPic" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3215054310,313370255&fm=26&gp=0.jpg" alt="">
        <div class="top">常用分类</div>
        <button @click="flower(item.type)" v-for="(item,i) in TypeList" :key="i">{{item.name}}</button>
      </el-tab-pane>
      <el-tab-pane label="商务鲜花">商务鲜花</el-tab-pane>
      <el-tab-pane label="永生花">永生花</el-tab-pane>
      <el-tab-pane label="蛋糕">蛋糕</el-tab-pane>
      <el-tab-pane label="巧克力">巧克力</el-tab-pane>
      <el-tab-pane label="特色礼物">特色礼物</el-tab-pane>
      <el-tab-pane label="品牌公仔">品牌公仔</el-tab-pane>
      <el-tab-pane label="礼篮">礼篮</el-tab-pane>
      <el-tab-pane label="绿植花卉">绿植花卉</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {getType} from '../api/classify'
import Top from "../Home/Top"
  export default {
    components:{
      Top
    },
    data() {
      return {
        tabPosition: 'left',
        TypeList:[]
      }
    },
    mounted(){
      this.getTypeList()
    },
    methods:{
      flower(names){
          this.$router.push({
              path:"/list",
              query:{
                  names:names
              }
          })
      },
      getTypeList(){
        getType().then(res=>{
          this.TypeList = res.data
        })
      }
    }
  }
</script>

<style scoped>
.bigPic{
  margin-top: 9vh;
  width: 66vw;
  height: 15vh;
}
.top{
  border-bottom: 1px solid #e1e1e1;
  line-height: 5vh;
  font-size: 12px;
}
button{
  background: rgb(207, 87, 127);
  border: 0;
  padding: 1.5vh;
  margin-right: 8vw;
  margin-top: 3vh;
  
}
</style>

<style>
.el-tabs{
  border-top: 1px solid #e1e1e1;
  margin-top: 1.5vh;
}
.el-tabs__active-bar{
  background: rgba(255, 85, 26, 1);
}
.el-tabs--left .el-tabs__active-bar.is-left{
  width: 3px;
  left: 0;
}
.el-tabs{
  height: 100%;
}
</style>